---
title: Monitor your Astro Site with Sentry
description: How to monitor your Astro site with Sentry
sidebar:
  label: Sentry
type: backend
logo: sentry
stub: false
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Sentry](https://sentry.io) offers a comprehensive application monitoring and error tracking service designed to help developers identify, diagnose, and resolve issues in real-time.

Read more on our blog about [Astro's partnership with Sentry](https://astro.build/blog/sentry-official-monitoring-partner/) and Sentry's Spotlight dev toolbar app that brings a rich debug overlay into your Astro development environment. Spotlight shows errors, traces, and important context right in your browser during local development.

Sentry's Astro SDK enables automatic reporting of errors and tracing data in your Astro application.

## Project Configuration

A full list of prerequisites can be found in [the Sentry guide for Astro](https://docs.sentry.io/platforms/javascript/guides/astro/#prerequisites).

## Install

Sentry captures data by using an SDK within your application’s runtime.

Install the SDK by running the following command for the package manager of your choice in the Astro CLI:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add @sentry/astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add @sentry/astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add @sentry/astro
  ```
  </Fragment>
</PackageManagerTabs>

The astro CLI installs the SDK package and adds the Sentry integration to your `astro.config.mjs` file.

## Configure

To configure the Sentry integration, you need to provide the following credentials in your `astro.config.mjs` file.

1. **Client key (DSN)** - You can find the DSN in your Sentry project settings under *Client keys (DSN)*.
2. **Project name** - You can find the project name in your Sentry project settings under *General settings*.
3. **Auth token** - You can create an auth token in your Sentry organization settings under *Auth tokens*.

:::note
If you are creating a new Sentry project, select Astro as your platform to get all the necessary information to configure the SDK.
:::

```js title="astro.config.mjs" ins={2, 6-12}
import { defineConfig } from 'astro/config';
import sentry from '@sentry/astro';

export default defineConfig({
  integrations: [
    sentry({
      dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
      sourceMapsUploadOptions: {
        project: 'example-project',
        authToken: process.env.SENTRY_AUTH_TOKEN,
      },
    }),
  ],
});
```
Once you've configured your `sourceMapsUploadOptions` and added your `dsn`, the SDK will automatically capture and send errors and performance events to Sentry.

## Test your setup

Add the following `<button>` element to one of your `.astro` pages. This will allow you to manually trigger an error so you can test the error reporting process.

```astro title="src/pages/index.astro"
<button onclick="throw new Error('This is a test error')">Throw test error</button>
```

To view and resolve the recorded error, log into [sentry.io](https://sentry.io/) and open your project.
